lots of style updates after design review, bug fixes, and more improve

1 files changed, 34 insertions, 5 deletions

diff --git a/src/routes/[username]/dashboard/+page.svelte b/src/routes/[username]/dashboard/+page.svelte
index 7e424819..4c0917dc 100644
--- a/src/routes/[username]/dashboard/+page.svelte
+++ b/src/routes/[username]/dashboard/+page.svelte
@@ -11,7 +11,8 @@
 
 	let payreq = '',
 		payreqField,
-		withdrawing;
+		withdrawing,
+		loading;
 
 	let toggle = async () => {
 		payreq = '';
@@ -21,11 +22,14 @@
 	};
 
 	let withdraw = async () => {
+		loading = true;
 		try {
 			await post('/withdraw', { payreq });
 			withdrawing = false;
+			loading = false;
 		} catch (e) {
 			failure(e.message);
+			loading = false;
 		}
 	};
 
@@ -40,8 +44,8 @@
 
 <AppHeader avatarPosition="left-[calc(50vw-48px)] lg:left-[calc(15vw-48px)]" />
 
-<div class="text-center mx-auto lg:text-left lg:mx-0 lg:ml-[calc(15vw-48px)] mt-12 w-full md:w-72">
-	<h2 class="text-2xl font-semibold">{user.username}</h2>
+<div class="text-center mx-auto lg:text-left lg:mx-0 lg:ml-[calc(15vw-48px)] mt-20 w-full md:w-72">
+	<h2 class="text-3xl font-semibold">{user.username}</h2>
 	<span class="text-secondary">{user.address}</span>
 </div>
 
@@ -81,7 +85,7 @@
 		{:else}
 			<div class="space-y-3 w-[250px] md:w-[500px] md:pr-20">
 				<button on:click={() => (withdrawing = false)}>
-					<Icon icon="arrow-left" style="w-8" />
+					<Icon icon="arrow-left" style="w-8 hover:opacity-80" />
 				</button>
 
 				<div>
@@ -110,8 +114,33 @@
 					class="{!payreq
 						? 'opacity-50'
 						: 'opacity-100 hover:opacity-80'} rounded-2xl border py-3 font-bold w-full mt-2 bg-black text-white"
-					on:click={withdraw}>{$t('user.dashboard.send')}</button
+					on:click={withdraw}
 				>
+					{#if loading}
+						<svg
+							class="mx-auto h-6 w-6 animate-spin text-white"
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+						>
+							<circle
+								class="opacity-25"
+								cx="12"
+								cy="12"
+								r="10"
+								stroke="currentColor"
+								stroke-width="4"
+							/>
+							<path
+								class="opacity-75"
+								fill="currentColor"
+								d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+							/>
+						</svg>
+					{:else}
+						{$t('user.dashboard.send')}
+					{/if}
+				</button>
 			</div>
 		{/if}
 	</div>